<script lang="ts" setup>
import {type Action, ElMessage, ElMessageBox} from 'element-plus'
import {Search, Star, Message, Check} from '@element-plus/icons-vue'

const open = () => {
  ElMessageBox.alert('这是一个MessageBox消息框', '系统提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '确定',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>
<template>
  <el-row>
    <el-button size="large" @click="ElMessage.success('hello')">提交ElMessage.success</el-button>
    <el-button @click="open">提交open(ELMessageBox)</el-button>
    <el-button size="small">提交</el-button>
  </el-row>

  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button plain type="primary">主要按钮</el-button>
    <el-button plain type="success">成功按钮</el-button>
    <el-button plain type="info">信息按钮</el-button>
    <el-button plain type="warning">警告按钮</el-button>
    <el-button plain type="danger">危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button round type="primary">主要按钮</el-button>
    <el-button round type="success">成功按钮</el-button>
    <el-button round type="info">信息按钮</el-button>
    <el-button round type="warning">警告按钮</el-button>
    <el-button round type="danger">危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle></el-button>
    <el-button circle type="primary">
      <el-icon>
        <Edit/>
      </el-icon>
    </el-button>
    <el-button type="primary">
      <el-icon>
        <Search/>
      </el-icon>
      <span style="vertical-align: middle"> Search </span>
    </el-button>
    <el-button :icon="Check" circle type="success"></el-button>
    <el-button :icon="Message" circle type="info"></el-button>
    <el-button :icon="Star" circle type="warning"></el-button>
    <el-button circle type="danger">
      <el-icon>
        <Delete/>
      </el-icon>
    </el-button>
  </el-row>
</template>
<style scoped>
.el-row {
  margin: 10px;
}
</style>
